CSS 基础

层叠样式表进门：三种引入方式、四个基础选择器、文字与段落样式、颜色表示法，以及 text-align 和 margin: 0 auto 居中的第一次分家。

基本概念

层叠样式表（cascading style sheets）

给 html 标签设置样式（美观）

写在哪里？怎么写？

css 写在 style 标签里面 style 标签一般在 head 标签 title 标签下面

web-image71

里面的 p 是选择器 选择对 p 标签里的内容进行设计

web-image72

比如这里 p 标签里的文本颜色变成了 bisque 色号

body 标签里的背景颜色变成了 azure 色号

在 style 里的全是 css

要写一个 css

先找到 head 标签里 title 下的位置 加上个 style 标签

在 style 标签里 使用选择器选择要设计的对象

在花括号{}里设置属性和属性值

每个属性之间 要用分号隔开

一般设计样式肯定是设计用户看得到的区域 用户看得到的那不就是 body 里面的东西（head 是给浏览器看的）

然后就会有几个问题：

如果我有多个网页 那每个网页都要重新写一遍 style 吗

太麻烦了

能不能自己设计一个模板 放在文件里 然后需要调样式就直接引这个文件

移植性和维护性都要好很多

然后就是选择器方面 如果仅希望对某一段话而不是全部的 p 文本设计又该怎么办 选择器里面肯定也有很多要研究的地方

先解决第一个疑惑

CSS 引入方式

内嵌式

就是刚刚用的那种

css 写在 style 标签中

（style 虽然可以写在页面的任何位置 但通常约定是写在 head 标签里面）

外联式

css 写在一个单独的 .css 文件中

利用 link 标签在网页引入

web-image73 web-image74

css 文件里的内容和 style 里的内容一样（选择器+属性+属性值）

两种方式达成的效果一样 第二种明显有着更好的移植性

行内式

css 写在标签的 style 属性中

这样可以实现单独某段文字的样式设置

web-image75

通常可以配套 js 使用

web-image76

然后再细分的话 对某段文字里的某几个字再设计

加上 <font></font> 标签 里面用行内式设置

最好用的还是第二种 外联式

选择器

为的是解决设置特殊样式的问题 但好像行内式就帮我们解决了……

标签选择器

标签名 {
css属性名：属性值;
……
}

通过标签名 找到页面中所有这类标签 设置样式

（选择的都是一类 而不是某一个 不论嵌套的多深 都能被找到）

可以是 body h p div span……在 body 里的东西

类选择器

为的就是解决标签选择器的一些全选问题

（设置了 p 那所有的 p 全成一样的样式了）

用类选择器可以将一些想设置成相同样式的内容的标签上加上一个类 class

再通过类名去设置里面的样式

.类名 {
css属性名：属性值;
}
web-image77

道理都一样

也是把一类东西进行设置 不过可以实现不局限于某一标签

注意点就是：

  • 定义的时候 要加上一个点 .
  • 所有标签上都可以加 class 属性 属性值是类名
  • 类名可以是数字、字母、下划线、中划线组成 但不能以数字、中划线开头
  • 一个标签可以有多个类名 类名间用空格隔开
  • 类名可以重复 一个类选择器可以同时选中多个标签
web-image78

（一般 size 都是以 px 也就是像素为单位）

id 选择器

看上去 id 选择器和类选择器的功能是一样的

自己去分类

但 id 选择器的初衷并不是为了 css

而是为了 js

所以在这里并不常用

#id属性值 {
css属性名：属性值;
}
web-image79

注意：

  • 所有标签上都有 id 属性
  • id 属性值类似于身份证号码，在一个页面中是唯一的，不可重复的
  • 一个标签上只能有一个 id 属性值
  • 一个 id 选择器只能选中一个标签

虽然说这样去用 两个会是相同效果 但是！这只是简单的样式

web-image80

一旦加上了 js 那些高级效果 保准出错

这相当于法律 不遵守就准备受罚

通配符选择器

* {
css属性名：属性值;
}

找到页面中的所有标签 设置样式

很少去用 一般是用于设置页边距

* {
margin: 0px;
padding: 0px;
}

文字样式

字体大小：font-size

字体粗细：font-weight

字体样式：font-style

字体类型：font-family

外加一个 font 属性连写

字体大小

属性名：font-size

取值：数字 + px

谷歌浏览器默认文字大小是 16px

单位需要设置，否则无效

字体粗细

属性名：font-weight

取值：

关键字：

web-image81

纯数字：（100~900 的整百数）

web-image82

不是所有字体都提供了九种粗细，因此部分取值页面中无变化

实际开发中以：正常、加粗两种取值使用最多

字体倾斜

属性名：font-style

取值：

  • 正常（默认值）：normal
  • 倾斜：italic

字体类型

windows 默认微软雅黑 mac 默认苹方

web-image83

网页里一般用无衬线字体

报刊上一般用衬线字体

font-family

为什么用 family？？？

可见 格式为：具体字体1,具体字体2,具体字体3,具体字体4,...,字体系列

比如："Microsoft YaHei"、微软雅黑、黑体、宋体、楷体、sans-serif……

web-image84

（字体系列：sans-serif、serif、monospace 等）

渲染规则：

  1. 从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
  2. 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体

注意点：

  1. 如果字体名称中存在多个单词，推荐使用引号包裹
  2. 最后一项字体系列不需要引号包裹
  3. 网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

从左往右一直找 找到最后还没有就只能用任一种无衬线的字体 保证能显示

层叠问题

给同一个标签设置了相同的样式，此时浏览器会如何渲染呢？

——样式会层叠（覆盖），写在最下面的会生效

color: rgb(138, 185, 185);
color: aliceblue;
/* 最终color为aliceblue */

CSS （Cascading style sheets） 层叠样式表

所谓的层叠即叠加的意思，表示样式可以一层一层的层叠覆盖

font 连写

font-size: 18px;
font-weight: 400;
font-style: italic;
font-family: 宋体,黑体,sans-serif;

对于这些 font 可以不一一列出

font : style weight size family;

省略要求：只能省略前两个，如果省略了相当于设置了默认值

注意点：如果需要同时设置单独和连写形式

要么把单独的样式写在连写的下面

要么把单独的样式写在连写的里面

上面 4 句可以写成：

font: italic 500 18px 宋体,黑体,sans-serif;

中间用空格隔开

段落样式

缩进

对于一个段落 可以设置首行缩进

可以依旧以像素为单位

但这样局限性就比较大 需要自己去计算两个字所占的大小

而且一旦改变字体大小就会失去缩进两格的功能

这里就可以用一个新单位 em

text-indent: 2em;

属性名：text-indent

取值：

  • 数字 + px
  • 数字 + em（推荐：1em = 当前标签的 font-size 的大小）

水平对齐

属性名：text-align

取值：

web-image85

如果需要让文本水平居中，text-align 属性给文本所在标签（文本的父元素）设置

text-align : center 不止可以居中文字 还能居中一些图片 显示器 链接

  1. 文本
  2. span 标签、a 标签
  3. input 标签、img 标签、audio 标签……

注意点：

如果需要让以上元素水平居中，text-align : center 要给该元素的 父元素 设置

img { text-align: center; }

不行 image 在 body 里 所以要给 body 设置居中

或者自行用 div 包裹起来 再给 div 设置

web-image86

文本修饰

web-image87

属性名：text-decoration

取值：

web-image88

可以使用 text-decoration : none ; 清除 a 标签默认的下划线

web-image89 web-image90

行高

控制一行的上下行间距

属性名：line-height

取值：

  • 数字 + px
  • 倍数（当前标签 font-size 的倍数）
web-image91

tips：

  • 让单行文本垂直居中可以设置 line-height : 文字父元素高度
  • 网页精准布局时，会设置 line-height : 1 可以取消上下间距

行高与 font 连写的注意点：

如果同时设置了行高和 font 连写，注意覆盖问题

font : style weight size/line-height family;
web-image92

字号和间距间用 / 隔开而不是空格

浏览器调试

web-image93

颜色拓展

属性名：

  • 文字颜色：color
  • 背景颜色：background-color

属性值：

web-image94

① 关键词

常见颜色取值：

  • red：红色
  • green：绿色
  • blue：蓝色
  • yellow：黄色
  • orange：橘色
  • skyblue：天蓝色
  • pink：粉色

② rgb 表示法

每项取值范围：0~255

常见颜色取值：

  • rgb ( 255 , 0 , 0 ) ：红色
  • rgb ( 0 , 255 , 0 ) ：绿色
  • rgb ( 0 , 0 , 255 ) ：蓝色
  • rgb ( 0 , 0 , 0 ) ：黑色
  • rgb ( 255 , 255 , 255 ) ：白色

③ rgba 表示法

其实，比 rgb 表示法多了一个 a，a 表示透明度

a 的取值范围：0~1

  • 1：完全不透明
  • 0：完全透明

省略写法：rgba ( 0 , 0 , 0 , 0.5 ) 可以省略写成 rgba ( 0 , 0 , 0 , .5 )

④ 十六进制表示法

取值范围：两个数字为一组，每个数字的取值范围：0~9 , a~f

省略写法：如果三组中，每组数字都相同，此时可以每组省略只写一个数字

#ffaabb = #fab

常见取值：

  • #fff ：白色
  • #000 ：黑色

➢ 注意点：

  1. 类似于：#ffaabc 不能改写成 #fabc
  2. 实际开发中会直接使用测量工具直接得到颜色，不需要自己设计颜色，直接复制粘贴即可。
web-image95

居中拓展

文字有个文本框

以 div 为例

设置它的 width、height

就可以看到它的一个框

web-image96 web-image97

想要让这个框居中怎么办

text-align: center;？（tips：直接输入 tac 会有提示）

并没有做到整个框居中 而是把文字居中在了框里

要想将整个框居中 要使用 margin: 0 auto;

web-image98 web-image99

原理之后解释

附件

  • web前端.docx

⬅️ 02-HTML 🏠 00-前端与可视化 ➡️ 04-CSS 布局